<template>
  <view class="template-about tn-safe-area-inset-bottom" style="background-image: linear-gradient(to bottom, #3C8A40, #F8F9FA);">
    
    <view class="tn-flex tn-flex-row-between tn-flex-col-center " style="padding-top: 60rpx;">
      <view class="header-box tn-flex  tn-flex-col-center">
        <view class="logo-pic tn-shadow">
          <view class="logo-image">
            <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 80rpx;height: 80rpx;background-size: cover;border-radius: 50%;">
            </view>
          </view>
        </view>
        
        <view class="store-name tn-padding-left-sm">
          <text class="title">{{storeName}}</text>
          <view class="switch-store" @click="goBack">
            <text class="text-sm">切换门店</text>
            <text class="cuIcon-unfold margin-left-xs"></text>
          </view>
        </view>
      </view>
    </view>

    <view class="about__wrap">
      <view class="function-box tn-shadow">
        <view class="box-title">
          <text class="title-text">运营管理</text>
        </view>
	  					
        <view class="grid-box">
          <view class="grid-item" v-for="(item, index) in menuList" :key="index" @click="jumpUrl(index)">
            <view class="icon-wrapper tn-flex tn-flex-row-center tn-flex-col-center">
              <view :class="['tn-icon-' + item.icon]"></view>
            </view>
            <text class="item-text">{{item.name}}</text>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  .template-about{
  }
  /* 顶部背景图 start */
  .top-backgroup {
    height: 300rpx;
    z-index: -1;
   
  }
  /* 顶部背景图 end */
  
  /* 用户头像 start */
  .logo-image{
    width: 50rpx;
    height: 50rpx;
    position: relative;
    background-color: #FFFFFF;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%; 
    overflow: hidden;
  }
  
  /* 页面 start*/
  .about-shadow{
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	display: flex;
	flex-direction:column;
	justify-content: space-between;
  }
  
  .about {
    &__wrap {
      z-index: 1;
      margin: 20rpx 30rpx;
      margin-top: 0rpx;
    }
  }
  
  /* 图标容器7 start */
  .icon7 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 10rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 0;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }    
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 40rpx;
        height: 40rpx;
        font-size: 28rpx;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
	//订单运营营销工具
	.box{
		display: flex;
		flex-direction: column; 
		background-color: white; 
		padding-top: 20rpx;
		border-radius:12rpx;
		margin-bottom: 30rpx;
		position: relative;
	}
	.boxUp{
		margin-left: 30rpx;
		font-weight: bold;
		opacity: 0.9;
	}
	.boxDown{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding-top: 30rpx;
		padding-bottom: 10rpx;
	}
	.boxDownclock{
		width: 100%;
		height:100rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;
	
	}
	.boxDownclockSon{
		height: 100%;
		width: 14%;
		margin-left: 5.5%;
		margin-right: 5.5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.boxDownText{
		color: black;
		font-size: 24rpx;
		opacity: 0.9;
		margin-top: 8rpx;
	}

  .header-box {
    //background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 15rpx;
    padding: 10rpx 30rpx;
    width: 92%;
    margin: 20rpx auto;
  }

  .store-name {
    .title {
      font-size: 32rpx;
      color: #ffffff;
      font-weight: bold;
    }
    .switch-store {
      margin-top: 8rpx;
      color: rgba(255, 255, 255, 0.9);
      font-size: 24rpx;
    }
  }

  .function-box {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin: 20rpx;
    
    .box-title {
      margin-bottom: 30rpx;
      .title-text {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        position: relative;
        padding-left: 20rpx;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 30rpx;
          background: #3C8A40;
          border-radius: 3rpx;
        }
      }
    }
    
    .grid-box {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30rpx;
      
      .grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .icon-wrapper {
          width: 90rpx;
          height: 90rpx;
          background: #f0f9f0;
          border-radius: 20rpx;
          color: #3C8A40;
          font-size: 40rpx;
          margin-bottom: 12rpx;
          transition: all 0.3s;
          
          &:active {
            transform: scale(0.95);
          }
        }
        
        .item-text {
          font-size: 26rpx;
          color: #666;
        }
      }
    }
  }
</style>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import NavIndexButton from '@/libs/components/nav-index-button.vue'
  export default {
    name: 'about-demo-2',
    mixins: [template_page_mixin],
    components: { NavIndexButton },
    data(){
      return {
		  storeName: '',
		  menuList: [
		    { name: '门店列表', icon: 'inventory' },
		    { name: '房间列表', icon: 'shop-fill' },
		    { name: '房间套餐', icon: 'basket' },
		    { name: '订单管理', icon: 'brand' },
		    { name: '销售数据', icon: 'brand' },
		  ]
      }
    },
	onShow(){
		this.getStoreName();
	},
    methods: {
		getStoreName(){
			if(uni.getStorageSync('StorageName'))
			this.storeName=uni.getStorageSync('StorageName');
			else this.storeName="咸宁-大楚城店"
		},
		goBack() {
			console.log('切换门店');
			
			
		},
		jumpUrl(e) {
			let url = '';
			switch (e) {
				case 0:
					console.log('跳转门店列表')
					uni.reLaunch({
						url: '/pages/store/index'
					});
					break;
				case 1:
					console.log('跳转房间列表')
					url = '/pages/room/index';
					//记得传一个默认的门店值
					break;
				case 2:
					console.log('跳转房间套餐列表')
					url = '/pages/meal/index';
					break;
				case 3:
					console.log('跳转订单列表')
					url = '/pages/order/index';
					break;
				case 4:
					console.log('跳转销售数据列表')
					url = '/pages/finance/chart/index';
							
				
			}
			uni.navigateTo({
				url: url
			})},

    }
  }
</script>
